<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<view class="top-info">

			<view class="left">
				<view class="cu-avatar xl round" style="width: 140rpx;height: 140rpx;">
					<image style="width: 140rpx;height: 140rpx; border-radius:70rpx;" :src="user.avatar"
						mode="aspectFill"></image>
				</view>

			</view>
			<view class="title">{{user.nickname}}</view>


		</view>
		<view class="block"></view>
		<view class="order" style="position: relative;">

			<view style="display: flex;">
				<view class="jin">充值金额</view>
				<view class="czje">(最低充值金额1元）</view>
			</view>
			<view class="indication">
				<block v-for="(item,index) in swiperList" :key="index">
					<view @click="clickItem(index)" class="spot" :class="cardCur == index ? 'active': '' ">
						{{item.text}}元
					</view>
				</block>
			</view>

		</view>
		<view class="shu" style="width: 690rpx;height: 108rpx;">
			<view style="display: flex;position: relative;">
				<view class="in">
					<input style="width: 560rpx;height: 80rpx;" v-model="value" type="number" @input="hideKeyboard"
						placeholder="请输入充值金额" placeholder-style="text-align:right;line-height: 36px;">
				</view>
				<view class="yuan" style="">元</view>
			</view>

		</view>
		<view class="tips">
			<view class="content">充值500元-1000元，送月卡；1000元以上送季卡；5000元以上送年卡。</view>
		</view>
		<view class="di" v-if="cardCur>=0||value != ''">
			<view style="display: flex;">
				<view style="display: flex;margin-top: 40rpx;margin-left: 32rpx;">
					<view class="dz">到账：</view>
					<view class="gwjqian">{{value}}</view>
					<view class="gwj">余额</view>
					<!--					<view class="djjqian">{{value/2}}</view>-->
					<!--					<view class="djj">代金券</view>-->
				</view>
				<view class="btn2" @click="charge">立即充值</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	// #ifdef H5
	import wxsdk from '@/shopro/wechat/sdk'
	// #endif
	export default {
		data() {
			return {
				value: '',
				swiperList: [{
					id: 0,
					type: 'image',
					text: '100',
				}, {
					id: 1,
					type: 'image',
					text: '200',
				}, {
					id: 2,
					type: 'image',
					text: '300',
				}, {
					id: 3,
					type: 'image',
					text: '500',
				}, {
					id: 3,
					type: 'image',
					text: '1000',
				}, {
					id: 3,
					type: 'image',
					text: '5000',
				}],
				cardCur: -1,
				user: {},
			};

		},
		onLoad() {},
		onShow() {
			this.userInfoObject()
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 用户信息
			userInfoObject() {
				this.getUserInfo(uni.getStorageSync('token')).then(res => {
					this.user = res
				})
			},
			clickItem(index) {
				this.cardCur = index;
				this.value = this.swiperList[index].text
			},
			hideKeyboard(e) {
				this.cardCur = -1
				console.log('e', e)
				this.value = e.detail.value
				console.log('value', this.value)
			},
			// 提交
			charge() {
				this.$https('my.chargeMoney', {
					pay_money: this.value,
					daijin_money: this.value / 2
				}).then(result => {
					uni.showModal({
						title: '支付提示',
						confirmColor: '#ff0000',
						content: `是否确认使用微信支付`,
						success: modelres => {
							if (modelres.confirm) {
								wxsdk.wxpay(result.data, (res) => {
									if (res.errMsg == "chooseWXPay:ok") {
										self.$u.toast('支付成功');
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1000)
									} else {
										self.$u.toast('支付失败');
									}
								});
							}
						}
					});


					// uni.requestPayment({
					// 	provider: 'wxpay',
					// 	timeStamp: res.data.timeStamp,
					// 	nonceStr: res.data.nonceStr,
					// 	package: res.data.package,
					// 	signType: res.data.signType,
					// 	paySign: res.data.paySign,
					// 	success: (payRes) => {
					// 		// uni.navigateTo({
					// 		// 	url: './success'
					// 		// })
					// 		uni.showToast({
					// 			title: "支付成功",
					// 			icon: "success"
					// 		})
					// 		uni.navigateBack({
					// 			delta:1
					// 		})
					// 	},
					// 	fail: () => {
					// 		this.$u.toast('支付失败，请重试')
					// 	}
					// })
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.personal-wrap {
		padding-bottom: 100rpx;
		// position: relative;
		height: 100vh;
		overflow-y: auto;

		.top-info {
			height: 520rpx;
			width: 750rpx;
			// background: #fe6766;
			// background-image:url('https://d-duomi.bigchun.com/images/beijing.png');
			background: url();
			background-size: cover;

			.left {
				justify-content: center;
				display: flex;
				color: #fff;
				padding-top: 120rpx;
			}




		}

		.order {
			width: 690rpx;
			height: 400rpx;
			padding: 20rpx;
			background-color: #fff;
			margin: auto;
			border-radius: 20rpx;
			margin-top: -80rpx;
			box-shadow: inset 0px 18px 4px -10px #ff878785;
		}

		.shu {
			width: 690rpx;
			height: 108rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// margin-top: 44rpx;
			// margin-left: 24rpx;
			// margin-right: 24rpx;
			margin: 44rpx auto;
		}

		.title {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 19px;
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
		}

		.jin {
			font-size: 36rpx;
			font-weight: 500;
			line-height: 72rpx;
		}

		.czje {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 68rpx;
			margin-left: 10rpx;
		}

		.indication {
			// width: 300px;
			// width: 325px;
			// height: 36rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			// margin-left: 12px;
			margin-right: 24rpx;
		}

		.spot {
			color: #666666;
			opacity: 1;
			right: 0;
			position: relative;
			text-align: center;
			font-size: 28rpx;
			font-weight: 600;
			width: 192rpx;
			height: 112rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.spot.active {
			// color: #FFFFFF;
			// opacity: 1;
			// background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
			background: #FFEDED;
			color: #FC5351;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1px solid #FC5351;
		}

		.yuan {
			position: absolute;
			right: 20rpx;
			font-weight: 500;
			color: #666666;
			line-height: 80rpx;
			font-size: 40rpx;
		}

		.in input {
			text-align: right;
			color: #FC5351;
		}

		.tips {
			width: 686rpx;
			background: #F9E8E0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin-top: 20rpx;
			margin-left: 24rpx;
			margin-right: 24rpx;
			// padding-top: 30rpx;
			// padding-left: 24rpx;
			// padding-right: 24rpx;
			padding: 24rpx 24rpx 24rpx 24rpx;
		}

		.content {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF6121;
			line-height: 40rpx;
		}

		.di {
			width: 750rpx;
			height: 150rpx;
			background: #FFFFFF;
			position: absolute;
			bottom: 0px;

		}

		.btn2 {
			width: 196rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%);
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			opacity: 1;
			position: absolute;
			right: 32rpx;
			top: 29rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.dz {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
		}

		.gwjqian {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
			line-height: 42rpx;
		}

		.gwj {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
			line-height: 42rpx;
			margin-left: 4rpx;
		}

		.djjqian {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
			line-height: 42rpx;
			margin-left: 4rpx;
		}

		.djj {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FC5351;
			line-height: 42rpx;
		}

		.block {
			width: 702rpx;
			height: 28rpx;
			background: #ED4948;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			// position: absolute;
			// top: 426rpx;
			left: 24rpx;
			// opacity: 0.2;
			// z-index: 99;
			top: -64rpx;
			position: relative;
		}
	}
</style>